<template>
  <div id="wrapper-box">
    <el-row class="bgColor">
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="ibox-title pad">KPI数据展示</div>

        <div class="table mar">
          <el-table
            :border="true"
            :data="kpilableTable"
            :header-cell-style="{background:'#eef1f6'}"
            style="width: 100%">
            <el-table-column
              align="center"
              prop="name" 
              width="150"                               
              label="事业群"
              >
            </el-table-column>

            <el-table-column
              align="center"                             
              label="阶段点评审流程"
              >
              <template slot-scope="scope">
                <div class="wrapper marb">
                  <div class="wrapper-item">AB类项目</div>
                  <div class="card-content">                    
                    <div class="left">项目{{ scope.row.ab_period_project_count }}(个)</div>
                    <el-button class="right" style="padding: 5px" type="primary">覆盖率{{ getPercent(scope.row.ab_period_cover_rate) }}</el-button>
                  </div>
                </div>
                
                <div class="wrapper">
                  <div class="wrapper-item">所有项目</div>
                  <div class="card-content">                     
                    <div class="left">项目{{ scope.row.period_project_count }}(个)</div>
                    <el-button class="right" style="padding: 5px" type="primary">覆盖率{{ getPercent(scope.row.period_cover_rate) }}</el-button>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              align="center"                             
              label="客户投诉处理流程"
              >
              <template slot-scope="scope">
                <div class="wrapper marb">
                  <div class="wrapper-item">AB类项目</div>
                  <div class="card-content" style="color: #f56c6c"> 
                    <div class="left">投诉{{ scope.row.ab_complaint_project_count }}(个)</div>
                    <el-button class="right" style="padding: 5px" type="danger">覆盖率{{ getPercent(scope.row.ab_complaint_cover_rate) }}</el-button>
                  </div>
                </div>
                <div class="wrapper">
                  <div class="wrapper-item">所有项目</div>
                  <div class="card-content" style="color: #f56c6c"> 
                    <div class="left">投诉{{ scope.row.complaint_project_count }}(个)</div>
                    <el-button class="right" style="padding: 5px" type="danger">覆盖率{{ getPercent(scope.row.complaint_cover_rate) }}</el-button>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              align="center"                             
              label="Bug处理流程"
              >
              <template slot-scope="scope">
                <div class="wrapper marb">
                  <div class="wrapper-item">AB类项目</div>
                  <div class="card-content"> 
                    <div class="left">项目{{ scope.row.ab_bug_project_count }}(个)</div>
                    <el-button class="right" style="padding: 5px" type="primary">覆盖率{{ getPercent(scope.row.ab_bug_cover_rate) }}</el-button>
                  </div>
                </div>
                <div class="wrapper">
                  <div class="wrapper-item">所有项目</div>
                  <div class="card-content"> 
                    <div class="left">项目{{ scope.row.bug_project_count }}(个)</div>
                    <el-button class="right" style="padding: 5px" type="primary">覆盖率{{ getPercent(scope.row.bug_cover_rate) }}</el-button>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              align="center"                             
              label="版本Release流程"
              >
              <template slot-scope="scope">
                <div class="wrapper marb">
                  <div class="wrapper-item">AB类项目</div>
                  <div class="card-content"> 
                    <div class="left">项目{{ scope.row.ab_release_project_count }}(个)</div>
                    <el-button class="right" style="padding: 5px" type="primary">覆盖率{{ getPercent(scope.row.ab_release_cover_rate) }}</el-button>
                  </div>
                </div>
                <div class="wrapper">
                  <div class="wrapper-item">所有项目</div>
                  <div class="card-content"> 
                    <div class="left">项目{{ scope.row.release_project_count }}(个)</div>
                    <el-button class="right" style="padding: 5px" type="primary">覆盖率{{ getPercent(scope.row.release_cover_rate) }}</el-button>
                  </div>
                </div>               
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-input
          type="textarea"                        
          placeholder="请输入分析/建议"
          v-model="comment.comments.table_comments"
          style="padding: 10px">
        </el-input>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import http from '@/views/sys/axios'
  import { mapState } from 'vuex'

  export default {
    name: 'CompanyKpi',
    inject: ['comment'],
    // data() {
    //   return {
    //     comment: ''
    //   }
    // },
    props: {
      kpilableTable: {
        type: Array,
        default: () => {
          return []
        }
      },
      inputStatus: {
        type: Boolean,
        default: true
      }
    },
    computed: {
      ...mapState({
        chooseList: state => state.chooseList
      })
    },
    created() {
      //console.log(this.comment)
    },
    methods: {
      getPercent(num) {
        let number
        num ? number = (num*100).toFixed(2) + '%' : number = '0.00%'
        return number
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../../assets/common/common.scss';

  /deep/ .reach{
    color: rgb(46, 233, 8);
  }
  /deep/ .noReach{
    color: #e4393c;
  }
  .newReport{
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .border{
      box-sizing: content-box;
      height: 0;
      overflow: visible;
      margin-top: 1rem;
      margin-bottom: 1rem;
      border: 0;
      border-top: 1px solid rgba(0,0,0,.1);
  }
  .primary{
      color: #409EFF;
      font-size: 30px;
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 400;
  }
  .marT{
      margin-top: 20px;
  }
  .marb{
    margin-bottom: 5px;
  }
  .bgColor{
      background: #fff;
  }
  .pad{
      padding: 18px 20px;
      border-bottom: 1px solid #e6ebf5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;       
  }
  .mar{
    padding: 20px;
  }
  .wrapper{
    display: flex;
  }
  .wrapper-item{
    flex: 1;
    margin: auto;
  }
  .card-content{
    display: flex;
    width: 70%;
    margin: auto;
    padding: 3px 5px;
    flex-wrap: nowrap;
    color: #1682e6;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    border-radius: 4px;
    border: 1px solid #e6ebf5;
    background-color: #fff;
    overflow: hidden;
    transition: 0.3s;
    font-family: "Helvetica Neue";
    .left{
      flex: 1;
      margin: auto;
    }
    .right{
      flex: 1;
      margin: auto;
    }
  }
</style>